<script setup lang="ts">
import { ref, onBeforeUpdate } from 'vue'
const show = ref(false)
const visibleChange = (e) => {
  if (e === 'enter') {
    show.value = true
  } else {
    show.value = false
  }
}

const heightChange = (e) => {
  if (e) {
    nheight.value = e
  }
}

const reset = () => {
  nheight.value = 0
}

const nheight = ref(0)

const props = defineProps({
  height: {
    default: '50px'
  }
})

defineExpose({
  reset
})
</script>

<template>
  <div
    v-visibleRender="visibleChange"
    v-resizeObserver="heightChange"
    :style="{ 'min-height': nheight ? nheight + 'px' : height }"
  >
    <slot v-if="show" />
  </div>
</template>

<style scoped lang="less"></style>
